/**
 *说明：此函数用于封装一个分页组件
 *使用：只需要把相应的css和当前函数一起使用便可
 * @param {*} page 当前页码
 * @param {*} pageNumer 总页码
 * @param {*} mostNumber 中间区域显示的按钮个数
 * @param {*} container 待插入的父级容器
 */
function createPager(page, pageNumer, mostNumber, container) {
    //在生成分页模块之前，清空上次生成的
    container.innerHTML = "";

    //创建一个主容器
    var divPager = document.createElement('div');
    divPager.className = 'pager';
    /**
     *此函数用于创建a标签按钮
     *
     * @param {*} className 传入的类名
     * @param {*} text 显示的内容
     * @param {*} newPage 跳转至newPage页
     */
    function createButton(className, text, newPage) {
        var a = document.createElement('a');
        a.className = className;
        a.innerText = text;
        divPager.appendChild(a);
        a.onclick = function () {
            //🔔跳转的本质其实是重新调用createPager，传入新的参数
            //但是有某些情况是没法跳转的（第一页的上一页，最后一页的下一页，当前页跳当前页）
            if (newPage < 1 || newPage > pageNumer || newPage === page) {
                return;
            }
            createPager(newPage, pageNumer, mostNumber, container);
        }
    }


    /* 开始创建分页，分为四个模块 */
    //1.首页和上一页
    if (page === 1) {
        createButton('disabled', '首页', 1);
        createButton('disabled', '上一页', page - 1)
    } else {
        createButton('', '首页', 1);
        createButton('', '上一页', page - 1)
    }
    //2.中间的数字按钮
    var min = Math.floor(page - mostNumber / 2);
    if (min < 1) {
        min = 1
    }
    var max = min + mostNumber - 1;
    if (max > pageNumer) {
        max = pageNumer
    }
    //循环创建中间按钮
    for (let i = min; i <= max; i++) {
        if (i === page) {
            createButton('active', i, i)
        } else {
            createButton('', i, i)
        }
    }


    //3.下一页和尾页
    if (page === pageNumer) {
        createButton('disabled', '下一页', pageNumer);
        createButton('disabled', '尾页', pageNumer + 1)
    } else {
        createButton('', '下一页', page + 1);
        createButton('', '尾页', pageNumer)
    }
    //4.显示当前页和总页数
    var span = document.createElement('span');
    span.innerText = `${page}/${pageNumer}`;
    divPager.appendChild(span);


    /* 最终将divPager插入到container中 */
    container.appendChild(divPager);
}